import React from 'react';
import './FormHeader.css';

const FormHeader = ({
  breadcrumb = ["论文出版物域", "期刊论文", "新增"],
  onBack = () => {},
  onForward = () => {}
}) => {
  return (
    <div className="form-header">
      <div className="form-header__navigation">
        <button className="form-header__nav-btn" onClick={onBack}>
          <span className="form-header__nav-icon">‹</span>
        </button>
        <button className="form-header__nav-btn" onClick={onForward}>
          <span className="form-header__nav-icon">›</span>
        </button>
      </div>
      
      <div className="form-header__breadcrumb">
        {breadcrumb.map((item, index) => (
          <React.Fragment key={index}>
            <span className="form-header__breadcrumb-item">{item}</span>
            {index < breadcrumb.length - 1 && (
              <span className="form-header__breadcrumb-separator">-</span>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

export default FormHeader;
